<template>
    <div class="box">

        <div class="head">
            <!-- 用之前的 -->
        </div>
        <el-dialog title="参与讨论" :visible.sync="dialogFormVisible">
            <el-input
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 4}"
                    placeholder="请输入内容"
                    v-model="text">
            </el-input>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary"  @click="sendAnswer">确 定</el-button>
            </div>
        </el-dialog>

        <div class="body">
            <div class="main">
                <div class="mainHead">
                    <div class="Question">
                        <div class="QuestionContent">
                            <div class="QuestionHead">
                                <div class="QuestionHead-main">
                                    <div class="QuestionHead-main-tags">
                                        <div class="tagsContent">
                                            <span class="tagsbody" v-for="(tags,index) in tagsList" :key='index'><el-tag
                                                    style="font-size:14px">{{tags.tagsName}}</el-tag></span>
                                            <!-- <span class="tagsbody"><el-tag style="font-size:14px">自我提升</el-tag></span>
                                            <span class="tagsbody"><el-tag style="font-size:14px">业余时间</el-tag></span>
                                            <span class="tagsbody"><el-tag style="font-size:14px">想做的事情</el-tag></span> -->
                                        </div>

                                    </div>
                                    <!-- <h2>工作之余，大家怎么提升自己，下班后的工作之余或者工作需求完成之后的之余？</h2> -->
                                    <h2>{{mainWenTi}}</h2>
                                    <div class="QuestionHead-main-content">
                                        <p>
                                            {{mainHuiDa}}
                                        </p>
                                    </div>
                                </div>
                                <div class="QuestionHead-side">
                                    <div class="sideStatus">
                                        <div class="sideStatusContent">
                                            <el-button type="text">

                                                <div class="guanzhuzhe" style="padding-right:0">
                                                    <div class="gzztitle">关注者</div>
                                                    <strong>{{guanZhuZhe}}</strong>
                                                </div>
                                            </el-button>


                                            <el-button type="text" disabled style="margin:0;
                                            margin-right:10px">
                                                <div class="guanzhuzhe" style="border-left:1px solid #DCDFE6">
                                                    <div class="gzztitle">被浏览</div>
                                                    <strong>{{beiLiuLan}}</strong>
                                                </div>

                                            </el-button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="QuestionFoot">
                                <div class="QuestionFoot-Content">
                                    <div class="QuestionFoot-Content-buttons">
                                        <el-button type="primary">关注问题</el-button>
                                        <el-button @click="writeAnswer"><span class="ckicon el-icon-edit"></span>写回答</el-button>
                                        <el-button><span class="ckicon el-icon-circle-plus-outline"></span>邀请回答
                                        </el-button>
                                        <el-button type="text"><span class="ckicon el-icon-thumb"></span>好问题</el-button>
                                        <el-button type="text"><span class="ckicon el-icon-edit-outline"></span>添加评论
                                        </el-button>
                                        <el-button type="text"><span class="ckicon el-icon-s-promotion"></span>分享
                                        </el-button>

                                        <el-col :span="1"
                                                style="display:inline-block;float:right;position:relative;top:16px;">
                                            <el-dropdown trigger="click">
      <span class="el-dropdown-link">
        <span class="el-icon-more-outline"></span><i class=" el-icon--right"></i>
      </span>
                                                <el-dropdown-menu slot="dropdown">
                                                    <el-dropdown-item icon="el-icon-service">举报问题</el-dropdown-item>
                                                    <el-dropdown-item icon="el-icon-service">举报回答</el-dropdown-item>
                                                </el-dropdown-menu>
                                            </el-dropdown>
                                        </el-col>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
               <div class="bo-box">
                   <div class="mainBody">
                       <div class="mainBodyLeft">
                           <div class="card">

                               <div class="cardViewAll">
                                   <el-button style="width:100%"@click="writeAnswer"><span class="ckicon el-icon-edit"  ></span>写回答</el-button>
                               </div>

                               <div class="cardAnswer">
                                   <div class="cardAnswerHead">
                                       <span>{{num}}</span>
                                       个回答
                                   </div>
                                   <div class="cardAnswer-content" v-for="(card,index) in cardList" :key="index">
                                       <div class="AnswerHead">
                                           <div class="AnswerHead-author">
                                               <div class="authorImg">
                                                   <a href="#" target="_blank">
                                                       <img :src='card.headImg' alt="">
                                                   </a>
                                               </div>
                                               <div class="authorText">
                                                   <div class="authorTextOne">
                                                       <a href="#" target="_blank">
                                                           {{card.nickName}}
                                                       </a>
                                                   </div>
                                                   <div class="authorTextTwo">
                                                       <label >{{qianming[index % 3]}}</label>
                                                   </div>
                                               </div>
                                           </div>
                                           <div class="AnswerHead-zan">
                                               <a href="#" target="_blank">{{card.agree}}人赞同了该回答</a>
                                           </div>
                                       </div>
                                       <div class="AnswerBody">
                                       <span>
                                           <p>{{card.answer}}</p>
                                       </span>
                                           <el-link type="info" style="margin-top:10px">
                                               <span style="margin-right:6px">发布于</span>
                                               <span>{{card.time}}</span>
                                           </el-link>
                                       </div>
                                       <div class="AnswerFoot">
                                       <span style="margin-right:10px;">
                                           <el-button type="primary" plain>
                                           <span class="el-icon-caret-top  ckicon"></span>
                                           赞同
                                           <span>{{card.agree}}</span>
                                       </el-button>
                                       <el-button type="primary" plain>
                                           <span class="el-icon-caret-bottom"></span>
                                        </el-button>
                                       </span>

                                           <el-button type="text">
                                               <span class="el-icon-edit-outline"></span>
                                               <span>2</span>
                                               条评论
                                           </el-button>
                                           <el-button type="text"><span class="el-icon-s-promotion ckicon"></span>分享
                                           </el-button>
                                           <el-button type="text"><span class="el-icon-star-on ckicon"></span>收藏
                                           </el-button>
                                           <el-button type="text"><span class="el-icon-thumb ckicon"></span>好问题</el-button>
                                           <el-col :span="1"
                                                   style="display:inline-block;float:right;position:relative;top:16px;">
                                               <el-dropdown trigger="click">
      <span class="el-dropdown-link">
        <span class="el-icon-more-outline"></span><i class=" el-icon--right"></i>
      </span>
                                                   <el-dropdown-menu slot="dropdown">
                                                       <el-dropdown-item icon="el-icon-service">举报问题</el-dropdown-item>
                                                       <el-dropdown-item icon="el-icon-service">举报回答</el-dropdown-item>
                                                   </el-dropdown-menu>
                                               </el-dropdown>
                                           </el-col>

                                       </div>
                                   </div>


                               </div>
                               <div class="cardViewAll" style="margin-bottom:10px;">
                                   <el-button style="width:100%"  @click="writeAnswer">
                                       <span class="el-icon-edit ckicon"></span>
                                       写回答
                                   </el-button>
                               </div>
                           </div>

                       </div>

                       <div class="mainBodyRight">
                           <div class="mainBodyRight-body">
                               <div class="zoumadeng" style="padding-top: 25px; background-color: #f6f6f6">
                                   <div class="block" style="margin-left: 30px; ">
                                       <el-carousel height="150px">
                                           <el-carousel-item style="border-radius: 10px">
                                               <img  style="border-radius: 10px" src="../../assets/img/lun1.png" height="150" width="300"/>
                                           </el-carousel-item>
                                           <el-carousel-item style="border-radius: 10px">
                                               <img style="border-radius: 10px" src="../../assets/img/lun2.jpg" height="150" width="300"/>
                                           </el-carousel-item>
                                           <el-carousel-item style="border-radius: 10px">
                                               <img  style="border-radius: 10px" src="../../assets/img/lun3.png" height="150" width="300"/>
                                           </el-carousel-item>
                                       </el-carousel>
                                   </div>
                               </div>

                               <div class="mainBodyRight-wenti">
                                   <div class="mainBody-title">
                                       <label>相关问题</label>
                                   </div>
                                   <div class="mainBodyRight-wt">
                                       <div class="sp">
                                    <span class="spwt" v-for="(wt,index) in wentiList" :key="index">
<el-link type="info" class="sp-content" :underline="false">{{wt.wenti}}</el-link>
                                    </span>


                                       </div>
                                   </div>
                               </div>
                               <div class="mainBodyRight-shipin">
                                   <div class="mainBody-title">
                                       <label>相关视频</label>
                                   </div>
                                   <!-- <div class="mainBodyRight-sp">
                                       <div class="sp" >
                                           <el-link type="text" class="spcontent" v-for="(sp,index) in shipinList" :key="index"
                                           style="width:100%;height:auto;">
                                           <div class="spItem" style="float:left">
                                               <div>
                                                   <img :src="sp.shipinImgUrl" alt="">
                                               </div>
                                               <span class="spcontent-text">{{sp.shipinName}}</span>
                                           </div>
                                           </el-link>



                                       </div>
                                   </div> -->
                                   <div class="mainBodyRight-spsp">
                                       <a href="" v-for="(sp,index) in shipinList" :key="index">
                                           <div class="spsp">
                                               <img :src="sp.shipinImgUrl" alt="">
                                               <span class="spspsp">
                                            <a href="">{{sp.shipinName}}</a>

                                        </span>


                                           </div>
                                       </a>

                                   </div>
                               </div>


                           </div>

                       </div>
                   </div>
               </div>
                <el-row class="block-col-2">


                </el-row>
            </div>


        </div>
    </div>
</template>

<script>
    import {request} from "../../network/request";

    export default {
        name: 'taolun',
        data() {
            return {
                tagsList: [
                    {
                        id: 1,
                        tagsName: '自我提升',
                    },
                    {
                        id: 2,
                        tagsName: '业余时间',
                    },
                    {
                        id: 3,
                        tagsName: '想做的事情',
                    },
                ],
                qianming:['职业规划话题下的优秀答主', '职场大牛', '优质选手'],
                cardList: [
                    {
                        id: 1,
                        userImgURL: 'https://pic2.zhimg.com/v2-05d40ce6c3f64fd86d3ce65d9a87e2b9_xs.jpg?source=1940ef5c',
                        userName: 'vue',
                        userDetail: '职业规划话题下的优秀答主',
                        renTongShu: '5',
                        userHuiDa: '一般可以从工作技能提升，兴趣爱好培养，未来发展需要的技能等方面来找要做的事情。利用业余时间高效提升自我价值',
                        uploadDate: '2018-09-21',
                        pinLunShu: '0',
                    }
                ],
                wentiList: [
                    {
                        id: 1,
                        wenti: '利用业余时间高效提升自我价值',
                    },
                    {
                        id: 2,
                        wenti: '我身体一直不好，不知道怎么锻炼，然后人际关系还有工作生活，都是一团糟，不知道怎么办？',
                    },
                    {
                        id: 3,
                        wenti: '健身花那么多时间，是否值得？',
                    },
                    {
                        id: 4,
                        wenti: '上班族自我提升?',
                    }, {
                        id: 5,
                        wenti: '健身力量训练后如何避免/减轻肌肉酸疼？',
                    },
                ],
                shipinList: [
                    {
                        id: 1,
                        shipinImgUrl: 'https://pic3.zhimg.com/90/v2-5e91759e7a52026418297b6b7acd12d7_250x0.jpg?source=31184dd1',
                        shipinName: '利用业余时间高效提升自我价值',

                    },
                    {
                        id: 2,
                        shipinImgUrl: 'https://pic4.zhimg.com/90/v2-75fd72176f040769a0a7a3b050b14819_250x0.jpg?source=31184dd1',
                        shipinName: '如何能把兴趣变成可挣钱的工作',

                    },
                    {
                        id: 3,
                        shipinImgUrl: 'https://pic4.zhimg.com/90/v2-75fd72176f040769a0a7a3b050b14819_250x0.jpg?source=31184dd1',
                        shipinName: '游泳运动员身体形态特征及个性化训练探索',

                    },

                ],
                mainWenTi: "",
                mainHuiDa:"",
                guanZhuZhe: '35',
                beiLiuLan:"",
                dialogFormVisible: false,
                text:'',
                num:0

            }
        },
        created() {
            request({
                url:"/addOneViewOfDisscuss",
                method: "post",
                params:{
                    discussId:parseInt(this.$route.query.id)
                }
            }).then(res=>{
                    console.log(res.data);
                    this.mainWenTi= res.data.title;
                    this.mainHuiDa= res.data.des;
                    this.beiLiuLan= res.data.views;

            }).catch(err=>{
                //alert(err);
                console.log(err);
            });
            request({
                url:"/getAllAnswer",
                method: "post",
                params:{
                    userId:parseInt(this.$route.query.id)
                }
            }).then(res=>{
                console.log(res.data);
                this.cardList = res.data;
                this.num = res.data.length;

            }).catch(err=>{
                //alert(err);
                console.log(err);
            });
        },
        methods:{
            writeAnswer(){
              //  alert();
                this.dialogFormVisible = true;
            },
            sendAnswer(){
                this.dialogFormVisible = false
                /*
                * @RequestParam("") int discussId,
                                 @RequestParam("") String answer,
                                 @RequestParam("") int userId,
                                 @RequestParam("") String nickName,
                                 @RequestParam("") String time,
                                 @RequestParam("") String headImg
                * */
                if(this.text != ""){
                    request({
                        url:"/insertOneAnswer",
                        method: "post",
                        params:{
                            discussId: parseInt(this.$route.query.id),
                            answer:this.text,
                            userId:parseInt(sessionStorage.getItem("userId")),
                            nickName:sessionStorage.getItem("nickName"),
                            time: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate(),
                            headImg:sessionStorage.getItem("imgUrl")
                        }
                    }).then(res=>{
                        console.log(res.data);

                        let t = this;
                        this.cardList.push({
                            agree: 0,
                            answer: t.text,
                            discussId: 0,
                            headImg: sessionStorage.getItem("imgUrl"),
                            nickName: sessionStorage.getItem("nickName"),
                            time: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate(),
                            userId:parseInt(sessionStorage.getItem("userId"))
                        })
                        this.text = "";
                    }).catch(err=>{
                        console.log(err);
                    });
                }
            }
        }
    }
</script>

<style>
    .spspsp a:link {
        color: #303133;
        text-decoration: none;
    }

    .spspsp a:visited {
        color: #303133;
        text-decoration: none;

    }

    .spspsp a:hover {
        color: #409EFF;
        text-decoration: none;

    }

    .spsp {
        width: 100%;
    }

    .spsp img {
        width: 30%;
        height: auto;
        display: inline-block;
        padding: 10px;
        box-sizing: border-box;

    }

    .bo-box{
        width: 100%;
    }
    .spsp span {
        width: 70%;
        height: auto;
        display: inline-block;
        font-size: 16x;
        color: #303133;
        position: relative;
        bottom: 48px;
    }

    * {
        padding: 0;
        margin: 0;
        font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;

    }

    .main {
        width: 100%;
        height: auto;
    }

    .mainHead {
        width: 100%;
        height: auto;
    }

    .Question {
        width: 100%;
        /*height: 266px;*/
        background-color: white;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .QuestionContent {
        width: 1200px;
        height: 100%;
        margin: 0 auto;
    }

    .QuestionHead {
        width: 100%;
        /*height: 210px;*/
    }

    .QuestionHead-main {
        width: 69%;
        height: 100%;
        float: left;
        text-align: left;
    }

    .QuestionHead-side {
        width: 30%;
        height: 100%;
        float: right;
    }

    .gzztitle {
        font-size: 14px;
        line-height: 30px;
    }

    .QuestionFoot {
        width: 100%;
        /*height: 50px;*/

    }

    .sideStatus {
        text-align: right;
    }

    .sideStatusContent {
        width: 200px;
        float: right;

    }

    .sideStatusContent strong {
        font-size: 18px;
        color: #303133;
    }

    .guanzhuzhe {
        width: 60px;
        /*height: 55px;*/
        padding: 5px;
    }

    .tagsbody {
        width: 80px;
        /*height: 20px;*/
        margin: 4px;
    }

    .tagsContent {
        width: 300px;
        /*height: 40px;*/
    }

    .QuestionHead-main-tags {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .QuestionHead-main-content {
        margin-top: 10px;
        margin-bottom: 10px;
        /*overflow: hidden;*/
        /*height: 108px;*/
    }

    .QuestionFoot-Content {
        width: 69%;
        padding-bottom: 10px;
        /*height: 50px;*/

    }

    .ckicon {
        margin-right: 4px;
    }

    .QuestionFoot-Content-buttons {
        text-align-last: justify;
    }

    .QuestionFoot-Content-buttons button {
        margin-right: 10px;
    }

    .main {
        background-color: #f6f6f6;
    }

    .mainBody {
        width: 1200px;
        margin: 0 auto;
        display: inline-block;
        position: absolute;
        left: 50%;
        margin-left: -600px;
    }

    .mainBodyLeft {
        width: 69%;
        height: auto;
        /* background-color: skyblue; */

        display: inline-block;
    }

    .mainBodyRight {
        width: 31%;
        height: auto;
        /* background-color: slateblue;  */
        float: right
    }

    .cardAnswer {

        height: auto;
        background-color: white;
        border-radius: 3px;

        box-sizing: border-box;
        margin-top: 10px;
        margin-bottom: 10px;
        text-align: left;
    }

    .cardAnswer-content {
        box-sizing: border-box;
        padding: 10px;
        border-bottom: 1px solid #DCDFE6;
        margin-bottom: 10px;
    }

    .authorImg {
        width: 45px;
        height: 45px;
        display: inline-block;
    }

    .authorImg img {
        width: 35px;
        height: 35px;

    }

    .authorText {
        /* width: 200px; */
        display: inline-block;
        height: auto;

    }

    .authorTextOne a {
        font-weight: 600;
        text-decoration: none;
        color: #303133;
    }

    .authorTextTwo {
        color: #909399;
    }

    .AnswerHead-zan a {
        color: #C0C4CC;
        text-decoration: none;
    }

    .AnswerBody {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .ConerButton {
        float: right;
        display: fixed;
        position: relative;
        top: 1000px
    }

    .cardAnswerHead {
        font-weight: 600;
        padding-left: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid #DCDFE6;
    }

    .card {
        width: 100%;
        height: auto;
    }

    .zoumadeng {
        width: 100%;
        height: 200px;
        background-color: white;
        box-sizing: border-box;
        border-bottom: 1px solid #DCDFE6;
        margin-bottom: 10px;
    }

    .mainBodyRight-body {
        margin-left: 10px;
    }

    .mainBodyRight-wenti {
        margin-bottom: 10px;
    }

    .mainBodyRight-shipin {
        margin-bottom: 10px;
    }

    .mainBodyRight-shipin {
        width: 100%;
        height: auto;
        background-color: #fff;
        text-align: left;
        box-sizing: border-box;

    }

    .mainBodyRight-sp {
        width: 100%;
        height: auto;
        text-align: left;
    }

    .mainBodyRight-sp span {
        width: 200px;
        height: auto;
        margin-left: 10px;

    }

    .mainBodyRight-wenti {
        width: 100%;
        height: auto;
        background-color: #fff;
        text-align: left;
        box-sizing: border-box;

    }

    .mainBody-title {
        border-bottom: 1px solid #DCDFE6;
        padding: 10px;
    }

    .mainBodyRight-shipin label {
        font-size: 16px;
        font-weight: 600;

    }

    .mainBodyRight-wenti label {
        font-size: 16px;
        font-weight: 600;

    }

    .spwt {

        width: 100%;

        height: auto;
        margin: 10px;
    }

    .sp-content {
        margin-left: 10px;
        font-size: 14px;
        padding-right: 10px;
        margin: 10px 0;
        color: #303133;

    }

    .spcontent {
        margin-left: 10px;
        font-size: 14px;
        padding-right: 10px;
        border-bottom: 1px solid #DCDFE6;
        color: #303133;
        font-weight: 600;
    }

    .sp {
        width: 100%;
        height: auto;
    }

    .sp .spItem {
        float: left;
    }

    .sp img {
        width: 30%;
        height: auto;
        text-align: left;
    }

    .spcontent-text {
        display: block;
        width: 100px;
        height: 100px;
        float: right;
    }

    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }

    .el-icon-arrow-down {
        font-size: 12px;
    }

</style>